<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/mui.min.css" th:href="@{/web/css/mui.min.css}">
	<link rel="stylesheet" href="css/home.css" th:href="@{/web/css/home.css}">
	<link rel="stylesheet" type="text/css" href="css/icons-extra.css" th:href="@{/web/css/icons-extra.css}"/>
	<link rel="stylesheet" type="text/css" href="css/app.css" th:href="@{/web/css/app.css}"/>
	<title>商品详情</title>
	<link href="favicon.ico" type="image/x-icon" rel="icon">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
	<style>
		html,
		body {
			background-color: #efeff4;
		}

		.mui-bar .mui-pull-left .mui-icon {
			padding-right: 5px;
			font-size: 28px;
		}

		.mui-bar .mui-btn {
			font-weight: normal;
			font-size: 17px;
		}

		.mui-bar .mui-btn-link {
			top: 1px;
		}

		.mui-content img{
			width: 100%;
		}
		.hm-description{
			margin: 15px;
		}

		.hm-description>li {
			font-size: 14px;
			color: #8f8f94;
		}


	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" th:inline="javascript">

        function addlove(id) {
            $.get([[@{/web/addlove/}]]+id,function(res){
                alert(res);
            });
        }


        function addshop(id) {
			$.get([[@{/web/addshop/}]]+id,function(res){
			    alert(res);
			});
        }
	</script>
</head>
<body>





<header id="header" class="mui-bar mui-bar-transparent">
	<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left" style="color:#666"></a>
	<h1 class="mui-title"></h1>
	<a class="mui-icon mui-icon-paperplane mui-pull-right" style="color:#666"></a>
</header>

<div class="mui-content" style="background:#fff">
	<div id="slider" class="mui-slider" >
		<div class="mui-slider-group">
			<div class="mui-slider-item" th:each="banner:${entity.shopBannerBeans}" th:object="${banner}">
				<a href="#">
					<img src="images/page.jpg" th:src="@{/upload/__*{img}__}">
				</a>
			</div>
		</div>
		<div class="mui-slider-indicator">
			<div class="mui-indicator"  th:each="banner:${entity.shopBannerBeans}" ></div>

		</div>
	</div>
	<div class="aui-title-h b-line">
		<h3 th:text="${entity.title}">2017春装新款修身九分西装裤小脚高腰休闲西裤女装,修身九分西装裤小  </h3>
		<p th:text="${entity.subtitle}">修身九分西装裤小脚高腰休闲西裤女装anna家32176</p>
		<em th:text="'¥'+${entity.price}">81.25</em>
		<div class="aui-title-sp "><span class="mui-icon-extra mui-icon-extra-heart">销量 34</span>  <span class="mui-icon-extra mui-icon-extra-heart">收藏475人</span>    </div>
	</div>
	<div class="devider b-line"></div>
	<div class="">
		<div style="padding:0 10px; margin-top:10px"class="">
			<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary" style="text-align: center">
				<!--<a class="mui-control-item mui-active" href="#item1">商品详情</a>-->
				<!--<a class="mui-control-item" href="#item2">规格尺码</a>-->
				<!--<a class="mui-control-item" href="#item3">商品评价</a>-->
				商品详情
			</div>
		</div>
		<div>
			<div id="item1" class="mui-control-content mui-active" style="height:auto;padding: 10px" th:utext="${entity.content}" >

			</div>


		</div>
	</div>
	<script>
//        mui.init({
//            swipeBack: true //启用右滑关闭功能
//        });
//        (function($) {
//            $('#scroll').scroll({
//                indicators: true //是否显示滚动条
//            });
//            var segmentedControl = document.getElementById('segmentedControl');
//            $('.mui-input-group').on('change', 'input', function() {
//                if (this.checked) {
//                    var styleEl = document.querySelector('input[name="style"]:checked');
//                    var colorEl = document.querySelector('input[name="color"]:checked');
//                    if (styleEl && colorEl) {
//                        var style = styleEl.value;
//                        var color = colorEl.value;
//                        segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
//                    }
//                }
//            });
//        })(mui);
	</script>


	<div style="height:900px"></div>
</div>



<div style="height:50px"></div>
<nav class="mui-bar mui-bar-tab">
	<div class="t-line aui-on-cell">
		<div class="aui-ons">
			<a href="#"><span class="mui-icon-extra mui-icon-extra-addpeople"></span><i>联系</i></a>
			<a th:onclick="'javascript:addlove(__${entity.id}__)'"><span class="mui-icon-extra mui-icon-extra-heart-filled"></span><i>收藏</i></a>
		</div>
		<div class="aui-onc">
			<a th:onclick="'javascript:addshop(__${entity.id}__)'" style="margin-right:-4px">加入购物车</a>
			<a href="order.html" class="aui-got">立即购买</a>
		</div>
	</div>



</nav>
<script src="js/mui.min.js" th:src="@{/web/js/mui.min.js}"></script>



<script type="text/javascript" >
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    var slider = document.getElementById("slider");
    mui('.mui-input-group').on('change', 'input', function() {
        if (this.checked) {
            switch (this.value) {
                case 'static':
                    document.getElementById("img1").className = "";
                    document.getElementById("slider").classList.add("mui-hidden");
                    break;
                case 'slider':
                    document.getElementById("img1").className = "mui-hidden";
                    if(slider.classList.contains("mui-hidden")){
                        document.getElementById("slider").classList.remove("mui-hidden");
                    }
                    break;
            }
        }
    });

//    function addshop(id) {
//		$.ajax({
//			url:'http://127.0.0.1:8081/web/addshop/4',
//			success:function(result){
//			    alert(result)
//			}
//		})
//    }



//    function addlove(id) {
//        $.ajax({
//            url:__@{/web/addlove/}__+id,
//            success:function (result) {
//            alert(result);
//        }
//    });
//    }
</script>



</body>
</html>